<template>
  <div id="xkChart" class="gy-chart"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    xkj: {
      type: Array,
    },
     pfj: {
      type: Array,
    },
    // xkq: {
    //   type: Array,
    // },
  },
  // 质量图表
  methods: {
    //许可图表
    permission() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != undefined
      ) {
        this.myChart.dispose(); //解决echarts dom已经加载的报错
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById("xkChart"));

      let option = {
        tooltip: {
          transitionDuration: 0,
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        grid: {
          left: "15%",

          right: "20",
          top: "20",
        },
        // color: ["#ad9c32", "#23a28d"],
        legend: {
          data: ["许可量", "排放量"],
          bottom: "20",
          itemWidth: 15,
          itemHeight: 15,
          itemGap: 35,
          textStyle: {
            color: "#66ACB8", // 图例文字颜色
          },
        },

        xAxis: {
          splitLine: {
            show: false,
          },
          type: "value",
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#adc5de",
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 3; //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#264471",
              width: 2,
              type: "solid",
            },
          },
          type: "category",
          data: ["总磷", "总氮", "氨氮", "化学需氧量"],
        },
        series: [
          {
            name: "许可量",
            type: "bar",
            barGap: "2%",
            barWidth: "14px",
            // data: [2, 1, 3, 4],
            data: this.xkj,
            itemStyle: {
               normal: {
                label: {
                  show: true,
                  position: 'right',
                  color:'white'
                },
              },
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#C9BE3A", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#EEB712", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          {
            name: "排放量",

            type: "bar",
            barWidth: "14px",
            // data: [1, 2, 3, 4],
            data: this.pfj,
            itemStyle: {
               normal: {
                label: {
                  show: true,
                  position: 'right',
                  color:'white'
                },
              },
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#2FAD82", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#12EEE6", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
        ],
      };
      this.myChart.setOption(option);
    },

    // 窗口大小改变
    handleResize() {
      this.myChart.resize(); // 只要窗口大小改变 echarts跟着容器变化
    },
  },
  mounted() {
    // 监听窗口大小改变
    window.addEventListener("resize", this.handleResize);

    this.permission();
  },
        watch: {
    xkj: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.permission(); // 重新绘制
      },
    },
       xkq: {
      deep: true, // 开启深度监听
      handler(newValue, oldValue) {
        // 观察到数据变化 重新渲染
        this.myChart.clear(); // 清除画布
        this.permission(); // 重新绘制
      },
    },
  },
  // 销毁前
  beforeDestroy() {
    // 解绑事件 [性能优化]
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>

<style lang="less" scoped>
.gy-chart {
  height: 3.875rem;
}
</style>